<template>
  <ArmyPanelLayout class="myFramePanelLayout" title="门禁记录">
    <div class="barracksCenterTwo">
      <el-scrollbar v-if="tableData.length">
        <div class="barracksCenterTwo--list">
          <div class="barracksCenterTwo--list__item" v-for="(item, index) in tableData" :key="item.time + index">
            <div class="img">
              <!--<img src="@/assets/images/armyScreen/sample2.png" />-->
              <img :src="item.picUrl"/>
            </div>
            <div class="infolist">
              <div class="infolist--item">
                <div class="infolist--item__icon">
                  <img src="@/assets/images/armyScreen/门禁记录_姓名@2x.png"/>
                </div>
                <div class="infolist--item__value">
                  {{ item.personName }}
                </div>
              </div>
              <div class="infolist--item">
                <div class="infolist--item__icon">
                  <img src="@/assets/images/armyScreen/门禁记录_时间@2x.png"/>
                </div>
                <div class="infolist--item__value">
                  {{ transformDate(item.time) }}
                </div>
              </div>
              <div class="infolist--item">
                <div class="infolist--item__icon">
                  <img src="@/assets/images/armyScreen/门禁记录_地址@2x.png"/>
                </div>
                <div class="infolist--item__value one-line" style="width: 116px;">
                  {{ item.acsDeviceName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div v-else class="empty" style="padding-top: 5%;">
        <DataEmptyTwo></DataEmptyTwo>
      </div>
    </div>
  </ArmyPanelLayout>
</template>

<script setup>
import ArmyPanelLayout from '@/views/armyScreen/comp/ArmyPanelLayout.vue'
import {acsRecordList} from '@/api/armyScreenApi.js'
import DataEmptyTwo from "@/components/common/DataEmptyTwo.vue";
import {ElScrollbar} from 'element-plus'
import $bus from "@/util/bus";

onMounted(() => {
  acsRecordListService()
  $bus.on('reRequest', acsRecordListService)
})
onBeforeUnmount(() => {
  $bus.off('reRequest', acsRecordListService)
})

const tableData = ref([])

/**
 * 获取门禁记录
 */
function acsRecordListService() {
  const paramObj = {}
  acsRecordList(paramObj).then(res => {
    tableData.value = res?.data?.list || [
      // {
      //   acsDeviceName: '1111',  // 门禁名称
      //   personName: '1111',  // 人员姓名
      //   picUrl: '1111',  // 图片地址
      //   time: '1111',  // 记录时间
      // },
      // {
      //   acsDeviceName: '1111',  // 门禁名称
      //   personName: '1111',  // 人员姓名
      //   picUrl: '1111',  // 图片地址
      //   time: '1111',  // 记录时间
      // },
      // {
      //   acsDeviceName: '1111',  // 门禁名称
      //   personName: '1111',  // 人员姓名
      //   picUrl: '1111',  // 图片地址
      //   time: '1111',  // 记录时间
      // },
    ]
  })
}

/**
 * 将后台返回的日期 格式化
 * @param dateStr {string} 日期字符串
 */
function transformDate(dateStr) {
  if (dateStr) {
    return dateStr.substring(0, 10).replaceAll("-", '/') + ' ' + dateStr.substring(11, 19)
  } else {
    return null
  }
}
</script>

<style lang="scss" scoped>
.myFramePanelLayout {
  width: 880px;
}

.barracksCenterTwo {
  width: 880px;
  height: 240px;
  padding: 0 16px;

  &--list {
    display: flex;
    //justify-content: space-around;
    padding: 14px 0;

    &__item {
      width: 152px;
      height: 212px;
      background: #042252;
      padding: 12px 0px 12px 8px;
      margin-right: 24px;

      .img {
        width: 104px;
        height: 120px;
        margin: 0 auto;
        margin-bottom: 10px;


        img {
          width: 100%;
          height: auto;
          max-height: 120px;
          object-fit: contain;
        }
      }

      .infolist {
        line-height: 20px;

        &--item {
          display: flex;

          &__icon {
            width: 16px;
            height: 16px;
            margin-right: 2px;
            position: relative;
            top: 2px;

            img {
              width: 100%;
              height: auto;
            }
          }

          &__value {
            flex-grow: 1;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #D8F0FF;
            letter-spacing: 0;
            font-weight: 400;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
